<template>
  <!-- 编辑频道页面 -->
  <div class="allChannels">
    <!-- 我的频道 -->
    <div class="myChannels">
      <div class="myChannelTitle">
        <span>我的频道</span>
        <van-button plain type="danger" size="small" @click="EditUserBtn = !EditUserBtn">{{EditUserBtn ? '取消' : '编辑'}}</van-button>
      </div>
      <van-grid :column-num="3" :border="false">
        <van-grid-item v-for="(userChannel, index) in UserServiceList" :key="userChannel.id" :text="userChannel.name" @click="userDeleteChannels(userChannel,index)" >
          <van-icon slot="icon" name="clear" v-if="EditUserBtn && !fixedChannel.includes(userChannel.id,index)" />
        </van-grid-item> 
      </van-grid>
    </div>
    <!-- 推荐频道 -->
    <div class="myChannels">
      <div class="myChannelTitle">
        <span>推荐频道</span>
        <van-button plain type="danger" size="small" @click="EditAllBtn = !EditAllBtn">{{EditAllBtn ? '取消' : '编辑'}}</van-button>
      </div>
      <van-grid :column-num="3" :border="false">
        <van-grid-item v-for="(userChannel,index) in addAllChannel" :key="userChannel.id" :text="userChannel.name" @click="userAddChannels(userChannel,index)">
          <van-icon slot="icon" name="add" v-if="EditAllBtn"/>
        </van-grid-item> 
      </van-grid>
    </div>
  </div>
</template>

<script>
import {getAllService,deleteUserChannel,addUserChannels } from '@/service/getDate'
// import { setStor } from '@/config/storage'
import { mapState } from 'vuex'
export default {
  name: 'addChannels',
  data () {
    return {
      userAllChannel: [], // 所有频道的数据
      EditUserBtn: false, // 个人频道的编辑按钮 
      EditAllBtn: false, // 推荐频道的编辑按钮
      fixedChannel: [0], // 固定频道，无法删除
    }
  },
  props: {
    UserServiceList: {
      type: Array,
      required: true
    },
    myActive: {
      type: Number,
      required: true
    }
  },
  computed: {
    ...mapState([
      'user'
    ]),
    addAllChannel() {
      // 过滤掉推荐频道与我的频道相同的频道
      return this.userAllChannel.filter(allData => {
        return !this.UserServiceList.find(myData => {
          return  myData.id === allData.id
        })
      })
    }
  },
  created() {
    this.getAllService()
  },
  mounted() {

  },
  methods: {
    // 获取所有频道
   async getAllService() {
      const {data} = await getAllService()
      console.log(data);
      this.userAllChannel = data.data.channels
    },
    // 点击删除频道
   async userDeleteChannels(data,index) {
     this.$emit('onChannelsJump', index, false)
      if(this.EditUserBtn) {
        if(this.fixedChannel.includes(data.id)){
          return
        }
        if(this.user) {
          try {
           await deleteUserChannel(data.id)
          } catch (err) {
            this.$toast.fail('删除失败')
          }
        } else {
          this.$store.commit('CHANNELS_ARR',this.UserServiceList)
        }
        this.$emit('onDeleteChannel', index)
      }
    },
    // 点击删除频道
   async userAddChannels(data) {
    this.$emit('channelsVal',data)

      if(this.EditAllBtn) {
        if(this.user) {
          try {
           await addUserChannels({
            id: data.id,
            seq: data.length,
           })
          } catch (err) {
            this.$toast.fail('添加失败')
          }
        } else {
          this.$store.commit('CHANNELS_ARR',data)
        }
      }
    }
  },
 

}
</script>

<style lang="scss" scoped>
  .allChannels{
    padding-top: 90px;

    .myChannels {
      margin-bottom: 40px;
      .myChannelTitle {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-size: 30px;
        height: 90px;
        padding: 20px;
        padding-right: 50px;
        margin: 0 20px 0px 10px;
        border-bottom: 1px solid #f5f5f5;
      }
    /deep/ .van-grid {
        .van-grid-item {
        position: relative;
        display: flex;
        justify-content: center;
         
           .van-grid-item__content {
            position: relative;
            width: 170px;
            height: 80px;
            margin-top: 30px;
            background-color: #f5f5f5;
             
            .van-icon {
              position: absolute;
              top: -40px;
              right: 45px;
              color: #999;
            }
           }
        }
      }
    }
 
  }
</style>